<template>
    <!-- //v-model让input接受对象变量 -->
     <h3>子组件3：使用计算属性完成矩形的面积随长宽数据响应式呈现   </h3>
      <div class="person">
      长方形的长: <input type="number" v-model="firstname"><br>
      长方形的宽: <input type="number" v-model="secondname"><br>
      长方形的面积为: <span>{{ fullName }}</span>
       <hr>
       <button @click="changefirst">长度加一</button>
       <button @click="changeSecond">宽度加一</button>
      </div>
  </template>
  <script setup name="New" lang="ts">
  import { reactive, toRef,ref, computed } from 'vue';
  let firstname = ref(0)
  let secondname = ref(0)
  
  let fullName = computed(()=>
   firstname.value * secondname.value
  ) 
   
   function changefirst(){
    firstname.value +=1
   }
  
   function changeSecond(){
    secondname.value +=1
   }
  </script>
  <style>
  
  </style>
  